<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link href="../css/enroll.css" rel="stylesheet" type="text/css"/>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>

    <script>
    let theCode = "";


        function enroll() {
            var nick = document.getElementById("in1").value;
            var email = document.getElementById("in2").value;
            var code = document.getElementById("in3").value;
            var password = document.getElementById("in5").value;
            var sex = document.getElementsByName("sex").values();
            var sign = document.getElementById("in7").value;

            //验证验证码是否正确
            if (code === theCode) {
                //注册账号
                axios({
                    method: "post",
                    url: "http://localhost:20202/STA_BLOG_CSDN_war_exploded/enrollServlet",
                    data: Qs.stringify({
                        nick: nick,
                        email: email,
                        password: password,
                        sex: sex,
                        sign: sign
                    }),
                }).then(function (resp) {
                    if (resp.data === "ok") {
                        //注册成功，跳转到登录页面。
                        window.location.href = 'login.html';
                        alert("温馨提示：注册成功，快来登录吧！（点击确定跳转到登录页面）");
                    }
                });
            } else {
                document.getElementById("wrong").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp验证码不匹配";
            }
        }

        function vCode() {
            var theEmail = document.getElementById("in2").value;
            axios({
                method: "post",
                url: "http://localhost:20202/STA_BLOG_CSDN_war_exploded/emailServlet",
                data: Qs.stringify({
                    email: theEmail
                }),
            }).then(function (resp) {
                if (resp.data.message === "发送成功") {
                    //设计按钮倒计时
                    console.log(resp.data);
                    theCode = resp.data.data;

                } else if (resp.data.message === "发送失败") {
                    document.getElementById("wrong").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp请输入有效的邮箱";
                }
            });
        }

         //查看用户名是否已被注册
        function checkNick() {
            var theNick = document.getElementById("in1").value;
            console.log(theNick);
            axios({
                method: "post",
                url: "http://localhost:20202/STA_BLOG_CSDN_war_exploded/nickServlet",
                data: Qs.stringify({
                    nick: theNick
                }),
            }).then(function (resp) {
                if (resp.data === "yes") {
                    console.log(resp.data);
                    document.getElementById("wrong").innerHTML = " ";
                } else if (resp.data === "no") {
                    document.getElementById("wrong").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp该用户名已被注册";
                }
            });
        }

        function checkPassWord() {
            //正则判断
            var passWord = document.getElementById("in5").value;
            var patt = /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{5,12}$/;//字母+数字，5-12位
            var flag = patt.test(passWord);
            if (flag || passWord === "") {
                document.getElementById("wrong").innerHTML = "&nbsp";
            } else {
                document.getElementById("wrong").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp请设置由字母，数字组成，长度为5-12位的密码";
            }
        }

        function checkPassWordAgain() {
            var passWord = document.getElementById("in5").value;
            var passWord2 = document.getElementById("in6").value;
            if (passWord === passWord2) {//两次输入必须一致
                document.getElementById("wrong").innerHTML = "&nbsp";
            } else if (passWord !== passWord2 && passWord !== "") {
                document.getElementById("wrong").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp两次密码输入不一致";
            }
        }

        function checkEmail() {
            //正则判断
            var email = document.getElementById("in2").value;
            var patt = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;//必须是邮箱格式
            var flag = patt.test(email);
            if (flag || email === "") {
                document.getElementById("wrong").innerHTML = "&nbsp";
            } else {
                document.getElementById("wrong").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp请输入正确格式的邮箱";
            }
        }

    </script>

</head>
<body class="backGround">
<h1 class="bigTitle">一个全新的账号将就此诞生</h1>
<div class="board">
    <h1 class="title">注 册 账 号</h1><br/>
    <form action="enrollServlet" method="post">
        <span id="wrong" style="color: #f76565;"> &nbsp;</span><br>
        <input onchange="checkNick();" type="text" class="in" id="in1" placeholder="请设置昵称" name="username"/><br/>
        <input onchange="checkEmail();" type="text" class="in" id="in2" name="email" placeholder="请输入预绑定的qq邮箱"/><br/>
        <input type="text" class="in1" id="in3" name="code" placeholder="请输入邮箱验证码"/>
        <input type="button" onclick="vCode()" class="vCode" value="获取验证码"><br/>
        <input onchange="checkPassWord();" type="password" name="password" class="in" id="in5"
               placeholder="请设置密码"/><br/>
        <input onchange="checkPassWordAgain();" type="password" class="in" id="in6" placeholder="请确认密码"/><br/>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女<br/>
        <br/><input class="textarea" rows="50" clos="8" id="in7" placeholder="请输入个人简介"><br/>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        <input type="reset" class="button" value="清空"/>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        <input type="button" class="button" onclick="enroll();" value="注册"/>
        <div class="other">已有账号？<a href="login.html">点此登录</a></div>
    </form>
    <br/>
</div>
<img class="leftTop" src="../img/flirty.png">
<img class="rightBottom" src="../img/baby.png">
<img class="rightTop" src="../img/dead-2.png">
<img class="leftBottom" src="../img/flirt.png">

</body>
</html>